<template>
  <div className="dialog" style="text-align: center">
    <img src=".././assets/img_sjpt_jsz@2x.png" className="imgCenter" alt=""/>
    <div style="text-align: center" className="cent">
      此版块正在紧锣密鼓的建设中，请移至其他版块继续浏览~
    </div>
  </div>
<!--   <div class="box">
    <div class="topBox">
      <div class="header">
        <div class="header-box">
          <div
            v-for="item in btnAyy"
            :key="item.value"
            @click="btnChange(item.value)"
            :class="actived == item.value ? 'Actived' : ''"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-left">
          <div class="first">
            <div class="title">车流分析</div>
            <div class="text-box">
              <div class="box-child">
                <div class="title">总车流量</div>
                <div style="width: 70%; text-align: right">
                  <span class="number">{{ Traffic.Count }}</span>
                  <span class="title">辆</span>
                  <i
                    class="el-icon-caret-bottom"
                    style="color: #fd6e6b"
                    v-if="Traffic.CountTB < 0"
                  ></i>

                  <i
                    class="el-icon-caret-top"
                    style="color: #3090f0"
                    v-if="Traffic.CountTB >= 0"
                  ></i>
                  <span style="font-size: 12px"> {{ Traffic.CountTB }}%</span>
                </div>
              </div>
              <div class="box-child">
                <div class="title">进场流量</div>
                <div style="width: 70%; text-align: right">
                  <span class="number">{{ Traffic.IntoTheCount }}</span>
                  <span class="title">辆</span>
                  <i
                    class="el-icon-caret-bottom"
                    style="color: #fd6e6b"
                    v-if="Traffic.IntoTheCountTB < 0"
                  ></i>

                  <i
                    class="el-icon-caret-top"
                    style="color: #3090f0"
                    v-if="Traffic.IntoTheCountTB >= 0"
                  ></i>
                  <span style="font-size: 12px">
                    {{ Traffic.IntoTheCountTB }}%</span
                  >
                </div>
              </div>
              <div class="box-child">
                <div class="title">出场流量</div>
                <div style="width: 70%; text-align: right">
                  <span class="number">{{ Traffic.GoOutCount }}</span>
                  <span class="title">辆</span>
                  <i
                    class="el-icon-caret-bottom"
                    style="color: #fd6e6b"
                    v-if="Traffic.GoOutCountTB < 0"
                  ></i>

                  <i
                    class="el-icon-caret-top"
                    style="color: #3090f0"
                    v-if="Traffic.GoOutCountTB >= 0"
                  ></i>

                  <span style="font-size: 12px">
                    {{ Traffic.GoOutCountTB }}%</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="second">
            <div class="title">放行类型占比</div>
            <div class="eacharts" ref="releaseEacarts"></div>
          </div>
        </div>
        <div class="content-center" ref="MyMapEacharts"></div>
        <div class="content-right">
          <div class="first">
            <div class="title">收入分析</div>
            <div class="text-box">
              <div class="box-child">
                <div class="title">实收总金额</div>
                <div style="width: 70%; text-align: right">
                  <span class="number">{{ IncomeAnalysis.sum }}</span>
                  <span class="title">元</span>
                  <i
                    class="el-icon-caret-bottom"
                    style="color: #fd6e6b"
                    v-if="IncomeAnalysis.sumTB < 0"
                  ></i>

                  <i
                    class="el-icon-caret-top"
                    style="color: #3090f0"
                    v-if="IncomeAnalysis.sumTB >= 0"
                  ></i>

                  <span style="font-size: 12px">
                    {{ IncomeAnalysis.sumTB }}%</span
                  >
                </div>
              </div>
              <div class="box-child">
                <div class="title">临停收入</div>
                <div style="width: 70%; text-align: right">
                  <span class="number">
                    {{ IncomeAnalysis.freeReceiveAmount }}</span
                  >
                  <span class="title">元</span>
                  <i
                    class="el-icon-caret-bottom"
                    style="color: #fd6e6b"
                    v-if="IncomeAnalysis.freeReceiveAmountTB < 0"
                  ></i>

                  <i
                    class="el-icon-caret-top"
                    style="color: #3090f0"
                    v-if="IncomeAnalysis.freeReceiveAmountTB >= 0"
                  ></i>

                  <span style="font-size: 12px">
                    {{ IncomeAnalysis.freeReceiveAmountTB }}%</span
                  >
                </div>
              </div>
              <div class="box-child">
                <div class="title">月卡收入</div>
                <div style="width: 70%; text-align: right">
                  <span class="number">
                    {{ IncomeAnalysis.memberReceiveAmount }}</span
                  >
                  <span class="title">元</span>
                  <i
                    class="el-icon-caret-bottom"
                    style="color: #fd6e6b"
                    v-if="IncomeAnalysis.memberReceiveAmountTB < 0"
                  ></i>

                  <i
                    class="el-icon-caret-top"
                    style="color: #3090f0"
                    v-if="IncomeAnalysis.memberReceiveAmountTB >= 0"
                  ></i>

                  <span style="font-size: 12px">
                    {{ IncomeAnalysis.memberReceiveAmountTB }}%</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="second">
            <div class="title">收入类型占比</div>
            <div class="eacharts" ref="IncomeTypeEacharts"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="Bottom-first">
        <div class="title">车流量趋势分析</div>
        <div class="eacharts" ref="trafficEacharts"></div>
      </div>
      <div class="Bottom-second">
        <div class="title">停车时长占比</div>
        <div class="eacharts" ref="parkingEacharts"></div>
      </div>
      <div class="Bottom-third">
        <div class="title">周转率趋势分析</div>
        <div class="eacharts" ref="velocityEacharts"></div>
      </div>
      <div class="Bottom-fourth">
        <div class="title">收入趋势分析</div>
        <div class="eacharts" ref="incomeEacharts"></div>
      </div>
    </div>
  </div>-->
</template>

<script>
// import haining from ".././Json/haining.json";


export default {
  data() {
    var color = ["#62DAAB", "#3090F0", "#F7C122", "rgba(255, 173, 77, 1)"];
    return {
      actived: 1,
      userID: 0,
      type: 1,
      //   车流分析
      Traffic: {
        GoOutCountTB: 0, //出场流量同比
        CountTB: -87, //总流量同比
        IntoTheCount: 62671, //进场流量
        Count: 117297, //总流量
        IntoTheCountTB: 0, //进场流量同比
        GoOutCount: 54626, //出场流量
      },
      //   收入分析
      IncomeAnalysis: {
        freeReceiveAmount: 0, //临停
        sumTB: 0, //总收入同比
        memberReceiveAmount: 1715100, //月卡
        freeReceiveAmountTB: 0, //临停同比
        memberReceiveAmountTB: 0, //月卡同比
        chargeReceiveAmounTB: 0, //固停同比
        sum: 13943880, //总收入
        chargeReceiveAmount: 0, //固停
      },
      btnAyy: [
        {
          name: "今日",
          value: 1,
        },
        {
          name: "昨日",
          value: 2,
        },
        {
          name: "近7日",
          value: 3,
        },
        {
          name: "近30日",
          value: 4,
        },
      ],
      //地图分布图
      option: {
        title: {
          text: "",
          subtext: "车场分布图",
          subtextStyle: {
            color: "#8F9BB3",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 0,
          max: 100,
          text: ["高", "低"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#e0effd", "#b1d5f9", "#7ebaf6", "#4fa1f2", "#3090f0"],
          },
        },
        series: [
          {
            name: "",
            type: "map",
            map: "haining",
            label: {
              show: true,
            },
            data: [
              {name: "海昌街道", value: 68},
              {name: "海洲街道", value: 72},
              {name: "长安镇", value: 5},
              {name: "斜桥镇", value: 2},
              {name: "周王庙镇", value: 2},
              {name: "盐官镇", value: 1},
              {name: "许村镇", value: 2},
              {name: "丁桥镇", value: 0},
              {name: "黄湾镇", value: 0},
              {name: "袁花镇", value: 0},
              {name: "硖石街道", value: 0},
              {name: "马桥街道", value: 0},
            ],
            // 自定义名称映射
          },
        ],
      },
      //放行类型占比
      releaseOption: {
        color: color,
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "1%",
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          itemGap: 40,
          textStyle: {
            color: "rgba(68, 68, 69, 1)",
            fontSize: "12",
          },
        },
        series: [
          {
            type: "pie",
            data: [
              {
                name: "免费放行",
                value: 23460,
              },
              {
                name: " 正常放行",
                value: 1464,
              },
            ],
            center: ["50%", "50%"],
            radius: ["30%", "45%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: color.map((item) => {
                    return item;
                  }),
                  //   padding: [0, -100, 0, -100],
                  fontSize: 13,
                  formatter: "{d}%",
                  rich: {
                    name: {
                      color: "rgba(36, 36, 36, 1)",
                      fontSize: 13,
                      align: "left",
                    },
                    percent: {
                      fontFamily: "DIN",
                      fontWeight: 500,
                      fontSize: 22,
                      color: "#1D91F5",
                      align: "left",
                    },
                    cir0: {
                      fontSize: 15,
                      opacity: 1,
                      color: "rgba(69, 188, 238, 1)",
                      padding: [-5, 92, 0, 92],
                    },
                    cir1: {
                      fontSize: 15,
                      opacity: 1,
                      color: "rgba(120, 100, 239, 1)",
                      padding: [-5, 92, 0, 92],
                    },
                  },
                },
                labelLine: {
                  length: 10,
                  length2: 40,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            name: "",
            hoverAnimation: false,
          },
        ],
      },
      //收入类型占比
      IncomeTypeOption: {
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}",
        },
        color: ["#62DAAB", "#3090F0", "#F7C122", "rgba(255, 173, 77, 1)"],

        grid: {
          bottom: 150,
          left: "1%",
          right: "1%",
        },
        legend: {
          bottom: "1%",
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          itemGap: 40,
          textStyle: {
            color: "rgba(68, 68, 69, 1)",
            fontSize: "14",
          },
        },
        series: [
          // 主要展示层的
          {
            center: ["50%", "50%"],
            radius: ["30%", "45%"],
            type: "pie",
            label: {
              normal: {
                show: true,
                // formatter: function (param) {
                //   return (
                //     ((param.data.value / this.total) * 100).toFixed() + "%"
                //   );
                // },
                formatter: "{d}%",
                textStyle: {
                  fontSize: 12,
                },
                position: "outside",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 25,
              },
              emphasis: {
                show: true,
              },
            },
            name: "类型占比",
            data: [
              {
                name: "临停收入",
                value: 20,
              },
              {
                name: "商家充值",
                value: 3,
              },
              {
                name: "固停收入",
                value: 8,
              },
            ],
          },
        ],
      },
      //停车时长占比
      ParkingOption: {
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c} ",
        },
        color: [
          "#62DAAB",
          "#3090F0",
          "#F7C122",
          "rgba(255, 173, 77, 1)",
          "rgba(92,119,167,1)",
        ],

        grid: {
          bottom: 150,
          left: 100,
          right: "10%",
        },
        legend: {
          bottom: "1%",
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          itemGap: 40,
          textStyle: {
            color: "rgba(68, 68, 69, 1)",
            fontSize: "14",
          },
        },
        series: [
          // 主要展示层的
          {
            center: ["50%", "50%"],
            radius: ["30%", "45%"],
            type: "pie",
            label: {
              normal: {
                show: true,
                // formatter: function (param) {
                //   return (
                //     ((param.data.value / this.total) * 100).toFixed() + "%"
                //   );
                // },
                formatter: "{b} {d}%",
                textStyle: {
                  fontSize: 12,
                },
                position: "outside",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 35,
              },
              emphasis: {
                show: true,
              },
            },
            name: "类型占比",
            data: [
              {
                name: "0-30min",
                value: 20,
              },
              {
                name: "30min-1h",
                value: 3,
              },
              {
                name: "1h-2h",
                value: 3,
              },
              {
                name: "2h-5h",
                value: 3,
              },
              {
                name: "5h以上",
                value: 3,
              },
            ],
          },
        ],
      },
      //   车流量趋势分析
      trafficOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        // legend: {
        //   itemHeight: 12,
        //   itemWidth: 12,
        //   top: "0%",
        //   left: "80%",
        //   right: "0%",
        //   icon: "rect",
        // },

        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "车流量趋势分析",
            type: "line",
            stack: "总量",
            smooth: true,
            areaStyle: {},
            itemStyle: {
              normal: {
                color: "#75CBED",
                lineStyle: {
                  color: "#75CBED",
                },
              },
            },
            areaStyle: {
              color: "#75CBED",
            },
            data: [2, 4, 6, 8, 4, 1, 25, 45, 125, 45, 75, 95],
          },
        ],
      },
      //周转率趋势分析
      velocityOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        // legend: {
        //   itemHeight: 12,
        //   itemWidth: 12,
        //   top: "0%",
        //   left: "80%",
        //   right: "0%",
        //   icon: "rect",
        // },

        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "车流量趋势分析",
            type: "line",
            stack: "总量",
            smooth: true,
            areaStyle: {},
            itemStyle: {
              normal: {
                color: "#F7C122",
                lineStyle: {
                  color: "#F7C122",
                },
              },
            },
            areaStyle: {
              color: "#F7C122",
            },
            data: [2, 4, 6, 8, 4, 1, 25, 45, 125, 45, 75, 95],
          },
        ],
      },
      //   收入趋势分析
      incomeOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        // legend: {
        //   itemHeight: 12,
        //   itemWidth: 12,
        //   top: "0%",
        //   left: "80%",
        //   right: "0%",
        //   icon: "rect",
        // },

        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "车流量趋势分析",
            type: "line",
            stack: "总量",
            smooth: true,
            showSymbol: true, //是否默认展示圆点
            symbol: "emptyCircle", //设定为实心点
            symbolSize: 4, //设定实心点的大小
            areaStyle: {},
            itemStyle: {
              normal: {
                color: "#75CBED",
                lineStyle: {
                  color: "#75CBED",
                },
              },
            },
            areaStyle: {
              color: "#75CBED",
            },
            data: [2, 4, 6, 8, 4, 1, 25, 45, 125, 45, 75, 95],
          },
        ],
      },
    };
  },
  methods: {
    btnChange(val) {
      console.log(val);
      this.type = val;
      this.actived = val;
      this.getTrafficData();
      this.getIncomeAnalysisData();
      this.getReleaseTypeData();
      this.getIncomeAccountedForData();
      this.getParkDurationData();
      this.getTrafficTrendData();
      this.getIncomeData();
      if (val == 2 || val == 3) {
        console.log(this.type);
        console.log("获取周的");
        this.getParkWeeksData();
      }
    },
    // 地图的
    drawLine() {
      /////////////////地图图表开始////////////////////////
      this.$echarts.registerMap("haining", haining);

      var MyMapEacharts = this.$refs.MyMapEacharts;
      var MyMapEacharts = this.$echarts.init(MyMapEacharts);
      MyMapEacharts.setOption(this.option);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          MyMapEacharts.resize();
        });
      }, 200);
      ////////////////地图图表结束////////////////////////////
    },
    // 放行类型占比
    drawrelease() {
      var releaseEacarts = this.$refs.releaseEacarts;
      var releaseEacarts = this.$echarts.init(releaseEacarts);
      releaseEacarts.setOption(this.releaseOption);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          releaseEacarts.resize();
        });
      }, 200);
    },
    // 收入类型
    drawIncomeType() {
      var IncomeTypeEacharts = this.$refs.IncomeTypeEacharts;
      var IncomeTypeEacharts = this.$echarts.init(IncomeTypeEacharts);
      IncomeTypeEacharts.setOption(this.IncomeTypeOption);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          IncomeTypeEacharts.resize();
        });
      }, 200);
    },
    // 停车时长占比
    drawparking() {
      var parkingEacharts = this.$refs.parkingEacharts;
      var parkingEacharts = this.$echarts.init(parkingEacharts);
      parkingEacharts.setOption(this.ParkingOption);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          parkingEacharts.resize();
        });
      }, 200);
    },

    //车流量趋势分析
    drawtraffic() {
      var trafficEacharts = this.$refs.trafficEacharts;
      var trafficEacharts = this.$echarts.init(trafficEacharts);
      trafficEacharts.setOption(this.trafficOption);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          trafficEacharts.resize();
        });
      }, 200);
    },

    // 周转率趋势分析
    drawvelocity() {
      var velocityEacharts = this.$refs.velocityEacharts;
      var velocityEacharts = this.$echarts.init(velocityEacharts);
      velocityEacharts.setOption(this.velocityOption);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          velocityEacharts.resize();
        });
      }, 200);
    },
    //收入趋势分析
    drawincome() {
      var incomeEacharts = this.$refs.incomeEacharts;
      var incomeEacharts = this.$echarts.init(incomeEacharts);
      incomeEacharts.setOption(this.incomeOption);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          incomeEacharts.resize();
        });
      }, 200);
    },
    // 获取车流分析的数据
    getTrafficData() {
      let data = {
        type: this.type,

        projectType: "THS",

        userId: this.userID,
      };
      getTraffic(data).then((res) => {
        console.log(res);
        this.Traffic = res;
      });
    },
    // 获取收入分析
    getIncomeAnalysisData() {
      let data = {
        type: this.type,

        projectType: "THS",

        userId: this.userID,
      };
      getIncomeAnalysis(data).then((res) => {
        console.log(res);
        this.IncomeAnalysis = res;
      });
    },
    // 获取放行类型占比的数据
    getReleaseTypeData() {
      let data = {
        type: this.type,

        projectType: "THS",

        userId: this.userID,
      };
      this.drawrelease();
      getReleaseType(data).then((res) => {
        console.log(res);

        let results = [
          {
            name: "免费放行",
            value: res.freeCount,
          },
          {
            name: " 正常放行",
            value: res.chargeCount,
          },
        ];
        this.releaseOption.series[0].data = results;
        this.drawrelease();
      });
    },
    //获取收入类型的占比
    getIncomeAccountedForData() {
      let data = {
        type: this.type,

        projectType: "THS",

        userId: this.userID,
      };
      this.drawIncomeType();
      getIncomeAccountedFor(data).then((res) => {
        console.log(res);
        let results = [
          {
            name: "临停收入",
            value: res.freeReceiveAmount,
          },
          {
            name: "商家充值",
            value: res.memberReceiveAmount,
          },
          {
            name: "固停收入",
            value: res.chargeReceiveAmount,
          },
        ];
        this.IncomeTypeOption.series[0].data = results;
        this.drawIncomeType();
      });
    },
    //获取停车时长占比数据
    getParkDurationData() {
      let data = {
        type: this.type,

        projectType: "THS",

        userId: this.userID,
      };
      getParkDuration(data).then((res) => {
        console.log(res);
        let results = [
          {
            name: "0-30min",
            value: res.thirtyMin,
          },
          {
            name: "30min-1h",
            value: res.oneH,
          },
          {
            name: "1h-2h",
            value: res.weoH,
          },
          {
            name: "2h-5h",
            value: res.fiveH,
          },
          {
            name: "5h以上",
            value: res.gteFiveH,
          },
        ];
        this.ParkingOption.series[0].data = results;
        this.drawparking();
      });
    },

    //获取车流量趋势分析数据
    getTrafficTrendData() {
      let data = {
        type: this.type,

        projectType: "THS",

        userId: this.userID,
      };
      getTrafficTrend(data).then((res) => {
        let results = res;
        let XData = [];
        let YData = [];
        res.forEach((item) => {
          XData.push(item.ShiJian);
          YData.push(item.count);
        });
        this.trafficOption.xAxis[0].data = XData;
        this.trafficOption.series[0].data = YData;
        this.drawtraffic();
      });
    },
    //获取周转率趋势分析数据
    getParkWeeksData(type) {
      var WeekType = 0;
      if (type) {
        WeekType = type;
      } else {
        WeekType = this.type;
      }
      let data = {
        type: WeekType,

        projectType: "THS",

        userId: this.userID,
      };
      getParkWeeks(data).then((res) => {
        let results = res;
        let XData = [];
        let YData = [];
        results.forEach((item) => {
          XData.push(item.ShiJian);
          YData.push(item.turnoverRate);
        });
        this.velocityOption.xAxis[0].data = XData;
        this.velocityOption.series[0].data = YData;
        this.drawvelocity();
      });
    },
    // 获取收入趋势的数据
    getIncomeData() {
      let data = {
        type: this.type,

        projectType: "THS",

        userId: this.userID,
      };
      getIncome(data).then((res) => {
        console.log(res);
        let XData = [];
        let YData = [];

        res.forEach((item) => {
          XData.push(item.ShiJian);
          YData.push(item.receiveAmount);
        });
        this.incomeOption.xAxis[0].data = XData;
        this.incomeOption.series[0].data = YData;
        this.drawincome();
      });
    },
  },
  computed: {},
  mounted() {
    // this.drawLine();

    // this.drawparking();
    // this.drawtraffic();
    // this.drawvelocity();
    // this.drawincome();
    // // 获取车流分析的方法
    // this.getTrafficData();
    // // 获取收入分析的方法
    // this.getIncomeAnalysisData();
    // this.getReleaseTypeData();
    // // 收入类型占比
    // this.getIncomeAccountedForData();
    // // 停车时长占比
    // this.getParkDurationData();
    // // 车流量趋势分析
    // this.getTrafficTrendData();
    // // 周转率趋势分析
    // this.getParkWeeksData(2);
    // // 收入趋势分析
    // this.getIncomeData();
  },
  created() {
    console.log(localStorage.getItem("userID"));
    this.userID = Number(localStorage.getItem("userID"));
  },
};
</script>

<style scoped lang="scss">
.box {
  box-sizing: border-box;
  background: rgba($color: #ddd, $alpha: 0.5);
  width: 100%;
  height: 100vh;
  padding: 0 20px 0 20px;

  .topBox {
    width: 100%;
    height: 58%;
    padding-top: 10px;

    .header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #fff;

      .header-box {
        width: 20%;
        display: flex;
        justify-content: space-around;

        div {
          cursor: pointer;
        }

        div:hover {
          color: #3090f0;
        }

        .Actived {
          color: #3090f0;
        }
      }
    }

    .content {
      width: 100%;
      height: 91%;
      margin-top: 5px;
      display: flex;
      justify-content: space-between;

      .content-left {
        width: 18%;
        height: 100%;

        .first {
          width: 100%;
          height: 30%;
          padding: 10px 0 0 10px;
          margin-bottom: 5px;
          background: #fff;

          .title {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8f9bb3;
          }

          .text-box {
            width: 80%;
            margin: auto;
            margin-top: 20px;

            .box-child {
              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #3d4966;
              }

              .number {
                font-size: 1rem;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #3d4966;
              }

              margin-bottom: 15px;
              display: flex;
              justify-content: space-between;
            }
          }
        }

        .second {
          width: 100%;
          height: 69%;
          padding: 10px 0 0 10px;
          background: #fff;

          .title {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8f9bb3;
          }
        }
      }

      .content-center {
        width: 63%;
        height: 100%;

        background: #fff;
      }

      .content-right {
        width: 18%;
        height: 100%;

        .first {
          width: 100%;
          height: 30%;
          padding: 10px 0 0 10px;
          margin-bottom: 5px;
          background: #fff;

          .title {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8f9bb3;
          }

          .text-box {
            width: 80%;
            margin: auto;
            margin-top: 20px;

            .box-child {
              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #3d4966;
              }

              .number {
                font-size: 1rem;

                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #3d4966;
              }

              margin-bottom: 15px;
              display: flex;
              justify-content: space-between;
            }
          }
        }

        .second {
          width: 100%;
          height: 69%;
          padding: 10px 0 0 10px;
          background: #fff;

          .title {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8f9bb3;
          }
        }
      }
    }
  }

  .bottomBox {
    margin-top: 10px;
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-between;

    .Bottom-first {
      width: 20%;
      height: 100%;
      padding: 10px 0 0 10px;
      background: #fff;

      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8f9bb3;
      }
    }

    .Bottom-second {
      width: 29%;
      padding: 10px 0 0 10px;
      height: 100%;
      background: #fff;

      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8f9bb3;
      }
    }

    .Bottom-third {
      width: 29%;
      height: 100%;
      padding: 10px 0 0 10px;
      background: #fff;

      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8f9bb3;
      }
    }

    .Bottom-fourth {
      width: 20%;
      height: 100%;
      padding: 10px 0 0 10px;
      background: #fff;

      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8f9bb3;
      }
    }
  }
}

.eacharts {
  width: 100%;
  height: 95%;
  //   border: 1px solid;
}

.dialog {
  width: 95%;
  height: 100%;
  padding-top: 30px;
  margin-left: 60px;

  .table {
    margin-top: 30px;
  }

  .chenckBtn {
    margin-top: 10px;
    height: 50px;
    width: 400px;
  }

  .cent {
    font-size: 20px;
    color: #898989;
  }
}

.imgCenter {
  width: 40%;
  height: 70%;
}
</style>
